<template>
  <div class="charts">
    <charts :option="wasteTypewuran" />
    <div
      class="total_box"
      :style="{ width: width + 'px', height: height + 'px' }"
    >
      <div class="fs-22 cr-hui1 familyD mb-6">{{ sum }}</div>
      <div class="fs-11 cr-hui3">件</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "echartData",
  props: ["wasteTypewuran", "sum", "width", "height"],
};
</script>

<style lang="scss" scoped>
.charts {
  height: 100%;
  position: relative;
  .total_b {
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .total_box {
    @extend .total_b;
    background: #ffffff;
    box-shadow: 0px 0px 20px 0px rgba(8, 64, 148, 0.1);
    top: 30%;
  }
  .total_c {
    @extend .total_b;
    top: 28%;
    left: 48%;
  }
}
</style>